<!-- 相册集页面 -->
<template>
  <div class="container">
    <div class="header">
      <i class="el-icon-back back-icon" @click="goBack"></i>
      <div class="title">
        <p>{{ $route.query.title }}</p>
      </div>
    </div>
    <div class="name">
      <p>{{ $route.query.title }}</p>
    </div>
    <div class="english">
      <p>{{ $route.query.english }}</p>
    </div>
    <div style="width: 90%; margin: 0 auto">
      <el-carousel class="card" :interval="4000" type="card" height="450px">
        <el-carousel-item v-for="item in 6" :key="item">
          <div
            :style="{
              backgroundImage:
                'url(' + require(`/static/photoAlbum/${item}.png`) + ')',
            }"
            @click="goToPhotos()"
          ></div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>


<script>
export default {
  name: "PhotoAlbum",
  data() {
    return {
      // 图片列表
      imageList: [],
      title: "",
      english: "",
    };
  },
  methods: {
    goBack() {
       // 使用$router.go(-1)实现浏览器的后退功能
       this.$router.go(-1);
    },
    goToPhotos() {
      this.$router.push({
        path: "/photos"
      });
    },
  },
  mounted() {
    // 处理参数变化，并更新data中的变量
    this.title = this.$route.query.title;
    this.english = this.$route.query.english;
  },
  // watch: {
  //   $route() {
  //     // 处理参数变化，并更新data中的变量
  //     this.title = this.$route.query.title;
  //     this.english = this.$route.query.english;
  //   },
  // },
};
</script>

<style scoped>
.header {
  background-color: rgb(96, 94, 94);
  color: white;
  display: flex;
  align-items: center;
  height: 60px; /* 调整高度 */
  margin-bottom: 30px; /* 添加 header 和 name 之间的间隔 */
}

.container {
  /* 设置div的高度为100vh，以铺满整个视口 */
  height: 100vh;
  /* 设置容器为相对定位，以便子元素的绝对定位 */
  position: relative;
  background-color: black; /* 设置 container 背景色为黑色 */
}

.back-icon {
  font-size: 28px; /* 调整图标大小 */
  cursor: pointer;
  margin-right: 10px; /* 调整图标与标题的间距 */
  margin-left: 10px; /* 向右移动图标 */
}

.title p {
  margin: 0;
  font-size: 26px;
  font-weight: bold;
  margin-left: 10px; /* 向右移动图标 */
}

.name {
  height: 80px;
  text-align: center; /* 居中文本 */
}

.english {
  height: 30px;
  text-align: center; /* 居中文本 */
  margin-bottom: 40px;
}

.english p {
  color: white;
  margin: 0;
  font-size: 30px;
  font-weight: bold;
  text-indent: -25px; /* 向左偏移 */
}

.name p {
  color: greenyellow;
  margin: 0;
  font-size: 50px;
  font-weight: bold;
  letter-spacing: 25px; /* 设置文字间隔 */
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

/* 设置每个 carousel-item 的样式 */
.el-carousel__item div {
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */
</style>